<template>
  <div class="vet_header">
    <el-col :xs="6" :sm="16" :md="16" :lg="16" :xl="16">
      <div class="left-panel">
        <Expand
          class="expandStyle"
          :class="open ? '' : 'iconTransform'"
          @click="$emit('handleOpen')"
        />
        <el-breadcrumb separator="/" class="hidden-xs-only">
          <el-breadcrumb-item
            v-for="(item, index) in breadcrumbList"
            :key="index"
            :to="item.path === '/' ? '/' : ''"
          >
            <template #default>
              <el-space>
                <svg-icon :name="item.meta.icon" />
                {{ item.meta.name }}
              </el-space>
            </template>
          </el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </el-col>
    <el-col :xs="18" :sm="8" :md="8" :lg="8" :xl="8">
      <div class="right-panel">
        <el-space>
          <!-- 明暗 -->
          <el-icon
            @click="handleToggleTheme(0)"
            :class="{ themeSelect: index === 0 }"
          >
            <Moon />
          </el-icon>

          <el-icon
            @click="handleToggleTheme(1)"
            :class="{ themeSelect: index === 1 }"
          >
            <Sunny />
          </el-icon>

          <!-- rrweb页面录制 -->

          <!--公告-->
          <el-popover :width="400" @show="showPopover" trigger="click">
            <template #reference>
              <el-badge :is-dot="false" :value="100" :max="99">
                <svg-icon
                  :name="`tonggao`"
                  :myStyle="{ fontSize: `25px`, cursor: `pointer` }"
                />
              </el-badge>
            </template>
            <template #default>
              <el-tabs model-value="first">
                <el-tab-pane label="未读列表" name="first" ref="root">
                  <tab-list
                    ref="firstTab"
                    :methodName="`parentProvide/getList`"
                  />
                </el-tab-pane>
                <el-tab-pane label="已读列表" name="second">
                  <!-- <tab-list /> -->
                </el-tab-pane>
              </el-tabs>
              <div class="clear">
                <el-button type="danger" text icon="CircleClose">
                  清空列表
                </el-button>
              </div>
            </template>
          </el-popover>

          <!--头像框-->
          <TyDropdown :avatar="avatar" :name="name" />
        </el-space>
      </div>
    </el-col>
  </div>
</template>

<script lang="ts">
import { Expand } from "@element-plus/icons-vue";
import {
  defineComponent,
  onMounted,
  reactive,
  watch,
  ref,
  onBeforeMount,
  onBeforeUnmount,
  provide,
  toRefs,
  defineAsyncComponent,
} from "vue";
import { useRoute, useRouter } from "vue-router";
import TabList from "./components/tabList.vue";
import TyDropdown from "../tyDropdown/index.vue";
import store from "@/store";

import { getWeiDuList } from "@/api/xitong/tonggao";

export default defineComponent({
  props: {
    open: {
      type: Boolean,
      default: true,
    },
  },
  components: {
    Expand,
    TabList,
    TyDropdown,
    VetTabsbar: defineAsyncComponent(
      () => import("@/vet/vetTabsbar/index.vue")
    ),
  },
  emits: ["handleOpen"],
  name: "HomeView",
  setup() {
    const router = useRouter();
    const route = useRoute();

    const state = reactive({
      avatar: "",
      name: store.getters["user/name"],
      index: 0,
    });

    const getImage = () => {
      let avatar = store.getters["user/avatar"] as string;
      if (avatar.includes("@")) {
        avatar = avatar.substring(avatar.lastIndexOf("/"), avatar.length);
        avatar = require("@/assets/images" + avatar);
      }
      state.avatar = avatar;
    };

    const scrollbar = ref();
    const scrollb = ref();
    const loadingList = ref(false);
    const firstTab = ref();

    const screenWidth = ref(document.body.clientWidth);
    const breadcrumbList = ref([] as any);

    // 监听路由变化
    watch(
      () => router.currentRoute.value.path,
      (newValue) => {
        createBreadcrumb(newValue);
      }
    );

    // 页面刷新时，根据路由生成面包屑
    onMounted(() => {
      createBreadcrumb(route.fullPath);

      getImage();
    });

    // 监听浏览器窗口大小
    onBeforeMount(() => {
      window.addEventListener("resize", handleResize);
    });
    onBeforeUnmount(() => {
      window.addEventListener("resize", handleResize);
    });

    // 生成面包屑
    const createBreadcrumb = (val: any) => {
      breadcrumbList.value = route.matched.filter(
        (item) => item.name && item.meta.name
      );

      if (val !== "/" && route.matched[0].path !== "/") {
        const routeList = store.getters["router/router"];
        const home = routeList.filter((item: any) => item.path === "/");
        breadcrumbList.value.unshift(home[0]);
      }
    };

    // 窗口改变
    const handleResize = () => {
      screenWidth.value = document.body.clientWidth;
    };

    // 获取未读列表
    const getUnReadList = async () => {
      return await getWeiDuList();
    };

    provide("parentProvide/getList", getUnReadList);

    // 打开弹出框
    const showPopover = () => {
      console.log("打开弹出框");
    };

    const handleToggleTheme = (index: number) => {
      state.index = index;
      window.document.documentElement.setAttribute(
        "data-theme",
        index ? "dark" : "light"
      );
    };

    return {
      ...toRefs(state),
      breadcrumbList,
      screenWidth,
      scrollbar,
      scrollb,
      loadingList,
      firstTab,
      showPopover,
      handleToggleTheme,
    };
  },
});
</script>

<style lang="scss" scoped>
.vet_header {
  height: 60px;
  user-select: none;
}

.header {
  height: 100%;
  user-select: none;
  /*新加*/
  /* position: relative;
  overflow: hidden; */
}

.left-panel {
  display: flex;
  align-items: center;
  justify-items: center;
  height: 60px;
}

.expandStyle {
  width: 1.6em;
  height: 1.6em;
  transform: rotate(0);
  transition: transform 0.5s;
  cursor: pointer;
}

.iconTransform {
  transform: rotate(540deg);
}

.el-breadcrumb {
  margin-left: 10px;
  :deep(.el-space) {
    .el-space__item {
      margin-right: 2px !important;
    }
  }
}

.right-panel {
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: flex-end;
  height: 60px;
  padding: 0 5px;
}

.el-badge {
  margin-right: 10px;
  --el-badge-padding: 2px;
  --el-badge-size: 12px;
}

.el-badge :deep(.el-badge__content.is-fixed) {
  top: -2px;
  right: 14px;
}

.clear {
  text-align: center;
  padding: 10px 0 0 0;
  border-top: 1px solid #e8eaec;
  cursor: pointer;
}
</style>